import { Layout, Menu } from 'antd';
import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import reactLogo from '@/assets/react.svg';
import useSelectedMenuKey from '@/hooks/useSelectedMenuKey';
import styles from './Framework.module.less';
import menus from './menus.config';

import { MenuClickEventHandler } from 'rc-menu/lib/interface';

const { Header, Content, Footer } = Layout;

const Framework: React.FC = () => {
  const selectedMenuKey = useSelectedMenuKey();
  const navigate = useNavigate();
  /**
   * 点击菜单
   */
  const handleClickMenu: MenuClickEventHandler = (menu) => {
    navigate(menu.key);
  };
  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.menu}>
          <img src={reactLogo} className={styles.logo} alt="React logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            selectedKeys={selectedMenuKey}
            defaultSelectedKeys={selectedMenuKey}
            items={menus}
            onClick={handleClickMenu}
          />
        </div>
      </Header>
      <Content className={styles.contentContainer}>
        <div className={styles.content}>
          <Outlet />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>我的站点 ©2022</Footer>
    </Layout>
  );
};

export default Framework;
